/**
 * create by cyw 2020-5-26
 * 首页内容列表子组件
 * */
import "./ListItem.scss"

import React from 'react'
import { connect } from "react-redux"
// import jsinvoke from 'component/jsapi';

class ListItem extends React.Component {
    constructor(props) {
        super(props)
    }
    goDetail(data) {
        console.log(data)
        window.location.href = './detail.html?id=' + data.id;
        // jsinvoke({
        //     cmd: 'openUrl',
        //     data: {
        //         url: encodeURIComponent('http://localhost:8080/detail.html?id=' + data.id)
        //     }
        // }, (val) => {
        //     console.log(val);
        // });
    }
    //渲染品牌和新到
    renderBrand(data) {
        if (data.brand_type) {
            return <div className="brand brand-pin">品牌</div>
        } else {
            return <div className="brand brand-xin">新到</div>
        }
    }
    //渲染星星
    renderScore(data) {
        let wm_poi_score = data.wm_poi_score || '';

        let score = wm_poi_score.toString();

        let scoreArray = score.split('.');

        //满星
        let fullstar = parseInt(scoreArray[0]);

        //半星
        let halfstar = parseInt(scoreArray[1]) >= 5 ? 1 : 0

        //没星
        let nullstar = 5 - fullstar - halfstar;

        let starjsx = []

        for (let i = 0; i < fullstar; i++) {
            starjsx.push(<div key={i + 'full'} className="star fullstar"></div>)
        }
        if (halfstar) {
            for (let j = 0; j < halfstar; j++) {
                starjsx.push(<div key={j + 'half'} className="star halfstar"></div>)
            }
        }
        if (nullstar) {
            for (let k = 0; k < nullstar; k++) {
                starjsx.push(<div key={k + 'null'} className="star  nullstar"></div>)
            }
        }
        return starjsx
    }
    //渲染月售
    renderMonthNum(data) {
        let month_sale_num = data.month_sale_num;
        if (month_sale_num > 999) {
            return '999+'
        }

        return month_sale_num
    }
    renderMeituanFlag(data) {
        let delivery_type = data.delivery_type
        if (delivery_type) {
            return <div className="item-meituan-flag">美团专送</div>
        }
        return null
    }
    renderOthers(data) {
        let array = data.discounts2 || [];

        return array.map((item, index) => {
            return (
                <div key={index} className="other-info">
                    <img src={item.icon_url} alt="" className="other-tag" />
                    <div className="other-content">{item.info}</div>
                </div>
            )
        })
    }
    render() {

        let data = this.props.itemData;
        return (
            <div className="r-item-content scale-1px" onClick={() => this.goDetail(data)}>
                <img src={data.pic_url} alt="" className="item-img" />
                {this.renderBrand(data)}
                <div className="item-info-content">
                    <p className="item-title">{data.name}</p>
                    <div className="item-desc clearfix">
                        <div className="item-score">{this.renderScore(data)}</div>
                        <div className="item-count">月售{this.renderMonthNum(data)}</div>
                        <div className="item-distance">&nbsp;{data.distance}</div>
                        <div className="item-time">{data.mt_delivery_time}&nbsp;|</div>
                    </div>
                    <div className="item-price">
                        <div className="item-pre-price">{data.min_price_tip}</div>
                        {this.renderMeituanFlag(data)}
                    </div>
                    <div className="item-others">
                        {this.renderOthers(data)}
                    </div>
                </div>
            </div>
        )
    }
}
export default connect(

)(ListItem)